<template>
  <div>
    <q-layout>
      <q-layout-header ref="header">
        <xheader :title="title" show-filter :is-filter="isFilter" @click-filter="popupFilter"></xheader>
      </q-layout-header>
      <q-page-container>
        <xscrollarea :scroll-height="scrollHeight">
          <q-page padding>
            <q-card v-for="(d,index) in data">
              <q-card-title>
                #{{index+1}} -{{d.name}}-{{d.code}}
              </q-card-title>
              <q-card-separator/>
              <q-card-main>
                <div class="row" v-for="dd in d.list">
                  <div class="col"><p>{{dd.label}}：</p></div>
                  <div class="col"><p>{{dd.value}}</p></div>
                </div>
              </q-card-main>
              <q-card-separator/>
              <q-card-actions>
                <q-btn label="领用" class="full-width" color="primary" @click="popDeal(index)"/>
              </q-card-actions>
            </q-card>
            <div v-if="data.length === 0" style="width: 100%;height: 100%;text-align: center;">

              <q-alert type="info">
                暂无配件可领用
              </q-alert>
            </div>
          </q-page>
        </xscrollarea>
      </q-page-container>
    </q-layout>
    <q-modal v-model="showPopup" position="bottom" @hide="cancel">
      <q-modal-layout>
        <xfilterheader @cancel="cancel" @confirm="search"></xfilterheader>
        <div class="layout-padding">
          <q-input float-label="物料编码" v-model="code" placeholder="模糊查询" clearable
                   :after="$parent.getScanIcon('code',this)"/>
          <q-input float-label="规格/型号" v-model="specifications" placeholder="模糊查询" clearable/>
          <q-input float-label="物料名称" v-model="materialname" placeholder="模糊查询" clearable/>
        </div>
      </q-modal-layout>
    </q-modal>

    <q-modal v-model="showDealPopup" minimized>
      <q-modal-layout>
        <q-toolbar slot="header">

          <q-toolbar-title>
            设备备品配件领料单
          </q-toolbar-title>
          <q-btn
            flat
            round
            dense
            @click="showDealPopup = false"
            icon="clear"
          />
        </q-toolbar>

        <div class="layout-padding" v-if="dealIndex !== undefined">
          <q-card>
            <q-card-title>
              {{data[dealIndex].name}}-{{data[dealIndex].code}}
            </q-card-title>
            <q-card-separator/>
            <q-card-main>
              <q-input
                v-model="kcNum"
                float-label="库存数量"
                readonly
              />
              <q-select
                v-model="shebeiCode"
                float-label="设备编码--名称"
                filter
                :options="shebeiCodeOptions" clearable
              />
              <q-select
                v-model="gysCode"
                float-label="供应商"
                filter
                :options="gysCodeOptions" clearable
              />
              <q-select
                v-model="cwCode"
                float-label="储位"
                filter
                :options="cwCodeOptions" clearable
              />
              <q-input
                v-model="zdcwkcNum"
                float-label="指定储位库存数量"
                readonly
              />

              <q-input float-label="领用数量" v-model="num" type="number" clearable/>
              <q-input float-label="领用说明" v-model="desc" type="textarea" clearable/>
            </q-card-main>
            <q-card-separator/>
          </q-card>
        </div>

        <q-toolbar slot="footer">
          <q-btn label="领用" class="full-width" color="primary" @click="submit()"/>
        </q-toolbar>
      </q-modal-layout>
    </q-modal>
  </div>
</template>

<script>

  import { spare_parts_collar_map } from '../../js/table-map'
  import Xheader from '../../components/xheader'
  import Xfilterheader from '../../components/xfilterheader'
  import Xscrollarea from '../../components/xscrollarea'

  export default {
    name: 'spare_parts_collar',
    components: { Xscrollarea, Xfilterheader, Xheader },
    props: {
      title: {}
    },
    computed: {
      isFilter () {
        return this.code !== '' || this.specifications !== '' || this.materialname !== ''
      }
    },
    mounted () {
      this.scrollHeight = this.$parent.webHeight - this.$refs.header.$el.clientHeight
    },
    watch: {
      cwCode () {
        if (this.cwCode !== '') {
          this.axios.post(this.$conf.server + '/Spareparts/EquipmentVendor', this.$qs.stringify({
            KWNAME: this.cwCode,
            //GYSIDS : gongyingshangIds,
            WLCODE: this.data[this.dealIndex].code
          })).then(res => {
            if (res.data.result) {
              this.zdcwkcNum = res.data.vendors[0].QTY;
            }
          })
        }
      }
    },
    data: () => ({
        code: '',
        specifications: '',
        materialname: '',
        codeBak: '',
        specificationsBak: '',
        materialnameBak: '',
        doSearch: false,
        data: [],
        dealIndex: undefined,
        showPopup: false,
        showDealPopup: false,
        kcNum: '',
        zdcwkcNum: '',
        shebeiCode: '',
        shebeiCodeOptions: [],
        gysCode: '',
        gysCodeOptions: [],
        cwCode: '',
        cwCodeOptions: [],
        num: '',
        desc: '',
        scrollHeight: 0

      }
    ),
    methods: {
      getData () {
        this.axios.post(this.$conf.server + '/Spareparts/Submission', this.$qs.stringify({
          Epcode: this.code,
          wlnames: this.materialname,
          models: this.specifications
        })).then(res => {
          let dd = res.data.conditions
          if (dd) {
            for (let d of dd) {
              let data = {}
              let list = []
              for (let a in d) {
                let value = d[a]
                if (a === 'WLCODE') {
                  data.code = value
                }
                if (a === 'WLNAME') {
                  data.name = value
                } else {
                  let key = spare_parts_collar_map.colMap.get(a)
                  if (key && key !== '') {
                    list.push({ 'label': key, 'value': value })
                  }
                }
              }
              data.list = list
              Object.assign(data, d)
              this.data.push(data)
            }
          }
        })
      }
      ,
      popupFilter () {
        this.showPopup = true
        this.doSearch = false
        this.codeBak = this.code
        this.specificationsBak = this.specifications
        this.materialnameBak = this.materialname
      }
      ,
      search () {
        this.showPopup = false
        this.doSearch = true
        this.data = []
        this.getData()
      }
      ,
      cancel () {
        this.showPopup = false
        if (!this.doSearch) {
          this.code = this.codeBak
          this.specifications = this.specificationsBak
          this.materialname = this.materialnameBak
        }
      }
      ,
      popDeal (index) {
        this.dealIndex = index
        this.showDealPopup = true
        this.axios.post(this.$conf.server + '/Spareparts/SumMaterielsresult', this.$qs.stringify({
          toolCode: this.data[index].code
        })).then(res => {
          if (res.data.result) {
            this.kcNum = res.data.sumnumbers[0].QTY;
            for (let v of res.data.Supplier) {
              this.gysCodeOptions.push({ value: v.GYSID, label: v.GYSNAME })
            }
            for (let v of res.data.Storage) {
              this.cwCodeOptions.push({ value: v.KWID, label: v.BARCODE })
            }
          } else {
            this.$parent.error("处理失败");
          }
        })

      },
      getOtherData () {
        this.axios.post(this.$conf.server + '/Spareparts/Inquireallresult').then(res => {
          // for (let v of res.data.adorgname) {
          //   this.cjCodeOptions.push({ value: v.ORGID, label: v.NAME })
          // }
          // for (let v of res.data.processname) {
          //   this.gxCodeOptions.push({ value: v.PROCESSID, label: v.NAME })
          // }
          for (let v of res.data.Plans) {
            this.shebeiCodeOptions.push({ value: v.SBID, label: v.CODE + "---" + v.NAME })
          }
        })
      },
      submit () {
        if (this.shebeiCode === "") {
          this.$parent.warn("请先选择物料所用设备！！");
        } else {
          if (this.cwCode === "") {
            this.$parent.warn("请先选择物料所用储位！！");
          } else {
            if (this.num === "") {
              this.$parent.warn("请先输入领用数量！！");
            } else {
              if (parseInt(this.num) > parseInt(this.zdcwkcNum)) {
                this.$parent.warn("该储位上物料库存数量不足！！");
              } else {
                this.$parent.confirm('提示', `确定领用:${this.data[this.dealIndex].WLNAME}物料？`, () => {
                  this.axios.post(this.$conf.server + '/Spareparts/SparepartsCleanReport', this.$qs.stringify({
                    MATERIEL: this.data[this.dealIndex].WLID,
                    WULNAMES: this.data[this.dealIndex].WLNAME,
                    WULCODES: this.data[this.dealIndex].WLCODE,
                    LOCATOR: this.data[this.dealIndex].KWID,
                    COMPANYS: this.data[this.dealIndex].COMPANY,
                    //GONGXU : gongxuname,
                    SHEBEI: this.shebeiCode,
                    BEIZHUS: this.desc,
                    COLLAR: this.num,
                    KUSHULIANG: this.kcNum,
                    ANNUMBER: this.data[this.dealIndex].ANNUMBERS,
                    //ORGIDS : orgnames,
                    CHUWEIS: this.cwCode,
                    GYSNAMES: this.gysCode
                  })).then(res => {
                    this.$parent.info("领用申请已提交，等待确认！");
                    this.kcNum = ''
                    this.num = ''
                    this.desc = ''
                    this.shebeiCode = ''
                    this.cwCode = ''
                    this.showDealPopup = false
                    this.getData()
                  })
                })
              }
            }
          }
        }
      }

    }
    ,
    created () {
      this.getData()
      this.getOtherData()
    }
  }
</script>

<style scoped>

</style>
